<form class="layui-form" lay-filter="form" id="form">
    <div class="layui-form-item">
        <label class="layui-form-label label-required-next">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required" lay-reqText="名称不能为空" autocomplete="off" class="layui-input">
        </div>
    </div>
    <fieldset class="layui-elem-field">
        <legend>默认</legend>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="type" value="0" title="按重量" checked>
                <input type="radio" name="type" value="1" title="按件数">
            </div>
            <label class="layui-form-label">包邮类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="free_type" value="0" title="按金额" checked>
                <input type="radio" name="free_type" value="1" title="按件数">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label label-required-next">包邮金额/件</label>
            <div class="layui-input-inline">
                <input type="text" value="0" name="free_price" lay-verify="price" lay-reqText="包邮金额/件不能为空" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">默认金额0表示不包邮</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label label-required-next">首重/件数</label>
            <div class="layui-input-inline">
                <input type="text" name="first_weight" lay-verify="number" lay-reqText="首重/件数不能为空" autocomplete="off" class="layui-input" placeholder="重量单位克">
            </div>
            <label class="layui-form-label label-required-next">费用</label>
            <div class="layui-input-inline">
                <input type="text" name="first_price" lay-verify="price" lay-reqText="首重/件数费用不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label label-required-next">续重/件数</label>
            <div class="layui-input-inline">
                <input type="text" name="second_weight" lay-verify="number" lay-reqText="续重/件数不能为空" autocomplete="off" class="layui-input" placeholder="重量单位克">
            </div>
            <label class="layui-form-label label-required-next">费用</label>
            <div class="layui-input-inline">
                <input type="text" name="second_price" lay-verify="price" lay-reqText="续重/件数费用不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">费用类型</label>
        <div class="layui-input-inline">
            <input type="radio" name="price_type" value="0" lay-filter="price_type" title="全国" checked>
            <input type="radio" name="price_type" value="1" lay-filter="price_type" title="指定地区">
        </div>
    </div>
    <div class="group_delivery layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">默认配送</label>
            <div class="layui-input-block">
                <input type="radio" name="open_default" value="0" lay-filter="open_default" title="关闭" checked>
                <input type="radio" name="open_default" value="1" lay-filter="open_default" title="开启">
                <span class="layui-word-aux">其他地区默认运费  注意：如果不开启此项，那么未设置的地区将无法送达！</span>
            </div>
        </div>
        <div id="group_delivery_prov">

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button type="button" class="layui-btn layui-btn-normal" lay-filter="add">添加地区</button>
        </div>
    </div>
    <script id="group_delivery_tpl" type="text/html">
        {{# layui.each(d.data, function(index, item){ }}
        <fieldset class="layui-elem-field">
            <legend>指定地区</legend>
            <div class="layui-field-box">
                <div class="layui-form-item">
                    <label class="layui-form-label">地区</label>
                    <div class="layui-input-block">
                        {{# layui.each(d.prov_data, function(i, prov){ }}
                        <input type="checkbox" name="group_area_id[{{ item.list_id }}][]" lay-filter="group_area_id" lay-skin="primary" value="{{ prov.id }}" title="{{ prov.name }}" {{# if(layui.jquery.inArray(prov.id, item.prov_id) !=-1){ }}checked{{# } }}>
                        {{# }); }}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="group_type[{{ item.list_id }}]" value="0" title="按重量" {{# if(item.type== 0){ }}checked{{# } }}>
                        <input type="radio" name="group_type[{{ item.list_id }}]" value="1" title="按件数" {{# if(item.type== 1){ }}checked{{# } }}>
                    </div>
                    <label class="layui-form-label">包邮类型</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="group_free_type[{{ item.list_id }}]" value="0" title="按金额" {{# if(item.free_type== 0){ }}checked{{# } }}>
                        <input type="radio" name="group_free_type[{{ item.list_id }}]" value="1" title="按件数" {{# if(item.free_type== 1){ }}checked{{# } }}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">包邮金额/件</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_free_price[{{ item.list_id }}]" value="{{ item.free_price }}" lay-verify="price" lay-reqText="包邮金额/件不能为空" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">默认金额0表示不包邮</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">续重/件数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_first_weight[{{ item.list_id }}]" value="{{ item.first_weight }}" lay-verify="number" lay-reqText="首重/件数不能为空" autocomplete="off" class="layui-input" placeholder="重量单位克">
                    </div>
                    <label class="layui-form-label label-required-next">费用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_first_price[{{ item.list_id }}]" value="{{ item.first_price }}" lay-verify="price" lay-reqText="首重/件数费用不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">续重/件数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_second_weight[{{ item.list_id }}]" value="{{ item.second_weight }}" lay-verify="number" lay-reqText="续重/件数不能为空" autocomplete="off" class="layui-input" placeholder="重量单位克">
                    </div>
                    <label class="layui-form-label label-required-next">费用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group_second_price[{{ item.list_id }}]" value="{{ item.second_price }}" lay-verify="price" lay-reqText="续重/件数费用不能为空" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-filter="del">删除地区</button>
                </div>
            </div>
        </fieldset>
        {{#  }); }}
    </script>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="content" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="hidden" name="id" value="">
            <input type="button" lay-submit lay-filter="form-submit" value="确认" class="layui-btn">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
<script>
    layui.data.sendParams = function (params) {
        layui.use(['verify'], function () {
            let form = layui.form,
                laytpl = layui.laytpl,
                common = layui.common,
                $ = layui.$;

            //监听显示指定地区信息
            form.on('radio(price_type)', function (data) {
                show_set_other_prov(data.value);
            })

            //显示指定地区信息
            function show_set_other_prov(price_type) {
                if (price_type == 1) {
                    $('.group_delivery').removeClass('layui-hide');
                } else {
                    $('.group_delivery').addClass('layui-hide');
                }
            }

            //获取省份
            let prov_data;
            let result = common.ajax('/helper/area')
            if (result) {
                prov_data = result.data;
            }
            //监听删除和添加按钮
            let prov_list_id = 0;
            $('.group_delivery').on('click', '[type="button"]', function () {
                let filter = $(this).attr('lay-filter');
                if (filter == 'add') {
                    add_delivery_prov({
                        prov_data: prov_data,
                        data: [{list_id: prov_list_id, type: 0, free_type: 0, free_price: '', first_weight: '', first_price: '', second_weight: '', second_price: ''}]
                    });
                } else if (filter == 'del') {
                    $(this).closest('.layui-elem-field').remove();
                }
            })

            //添加一个地区
            function add_delivery_prov(data) {
                laytpl($('#group_delivery_tpl').html()).render(data, function (html) {
                    $('#group_delivery_prov').append(html);
                })
                prov_list_id = prov_list_id + data.data.length;
                check_prov();
            }

            //监听地区选择选择的加入数组，方便后面按钮状态判断
            let group_area_id = Array();
            form.on('checkbox(group_area_id)', function (data) {
                if (data.elem.checked) {
                    group_area_id.push(data.value);
                } else {
                    group_area_id.splice($.inArray(data.value, group_area_id), 1);
                }
                check_prov();
            })

            //检查省份是否已经存在
            function check_prov() {
                $('#group_delivery_prov [type="checkbox"]').each(function () {
                    //已经选择的地区除了已经勾选的其他否不能勾选
                    if ($.inArray($(this).val(), group_area_id) != -1) {
                        if (this.checked == true) {
                            $(this).prop('disabled', false);
                        } else {
                            $(this).prop('disabled', true);
                        }
                    } else {
                        //没有选择的地区全部可以选择
                        $(this).prop('disabled', false);
                    }
                })
                form.render();
            }

            //初始化数据
            if (params.price_type) {
                //控制其他地区是否显示
                show_set_other_prov(params.price_type);
            }
            if (params.group_json) {
                //初始化其他地区
                add_delivery_prov({prov_data: prov_data, data: params.group_json});
            }
            if (params.group_area_id) {
                //初始化地区选择按钮
                group_area_id = params.group_area_id;
                check_prov();
            }
        });
    }
</script>